<template>
  <!-- 人气推荐 -->

    <HomePanel ref="target" title="人气推荐" sub-title="人气爆款 不容错过">
      <!-- <ul  class="goods-list">
      <li v-for="item in hotList" :key="item.id">
        <RouterLink to="/">
          <img :src="item.picture" alt="">
          <p class="name">{{item.title}}</p>
          <p class="desc">{{item.alt}}</p>
        </RouterLink>
      </li>
    </ul> -->
      <HomeList :goods="hotList" />
      <template #right>
        <xtx-more></xtx-more>
      </template>
    </HomePanel>

</template>

<script>
import HomePanel from './home-panel'
import { findHot } from '@/api/home'
import { ref } from 'vue'
import HomeList from './home-list'
// 导入监控元素是否进入可视区函数
import { useObserver } from '@/hooks'

// vue3函数式编程代码优化提取出来
const useRecom = () => {
  // 商品列表
  const hotList = ref([])
  // 获取商品数据
  const getHotList = async () => {
    const { result } = await findHot()
    hotList.value = result
  }
  // 挂载更新调用商品
  // onMounted(() => {
  //   getHotList()
  // })

  return { hotList, getHotList }
}

export default {
  name: 'HomeRecom',
  components: {
    HomePanel,
    HomeList
  },
  setup () {
    //  调用我们提取出去的优化代码需要结构出来
    const { hotList, getHotList } = useRecom()

    // 调用进去可视区域发请求的js代码，离开关闭监控发请求
    const { target } = useObserver(getHotList)

    // 还是要retrun出去我们赋值的商品列表
    return { hotList, target }
  }
}
</script>

<style scoped lang='less'>
</style>
